<template>
	<view class="">
		<shopro-login-modal></shopro-login-modal>
		
		<view class="page">
			
				<view class="top">
					<view class="title">
					<!-- 	<view class="icon" @click="goBack()">
							<u-icon name="arrow-left"  size="40"></u-icon>
						</view> -->
						兑换商城
					</view>
					<view class="info">
						<view class="left">
							<text>可用积分</text>
							<view class="val">
								{{textVal}}
							</view>
						</view>
						<view class="right"@click="junit('/pages/prefile/order/order', {type: 0})">
							我的订单
						</view>
					</view>
				</view>
				
				<view class="swiper" >
					<u-swiper :list="swiperArr" name="thumb" ></u-swiper>
				</view>
				<scroll-view scroll-x  style="width: 100vw; background-color: #fff;" >
					<view class="typeArr">
						<view class="typeArrItem"  v-for="(item,index) in typeArr" :key="index" @click="changeType(item.id)">
							<text :class="activeTypeId==item.id ? 'activeText' :'' " >{{item.name}}</text>
						</view>
					</view>
				</scroll-view>
				
					<scroll-view  style="height: 60vh;"  scroll-y @scrolltolower="scrolltolower">
						<view class="goodsArr">
							<view class="goodsArrItem" v-for="(item,index) in goodsList" :key="index" @click="junit('/pages/duihuanShop/goodsDetail/goodsDetail' , {id: item.goodid,shopType: 2,})">
								<view class="cover">
									<u-image  mode="widthFix"  width="182" height="182" lazy-load :src="item.thumb" :fade="true" duration="450">
										<u-loading slot="loading"></u-loading>
									</u-image>
									<!-- <image :src="item.thumb" ></image> -->
								</view>
								<view class="info">
									<view class="name">{{item.title}}</view>
									<view class="desc">
										{{item.ydh}}人已兑换
									</view>
									<view class="bottomBox">
										<text>{{item.x_str}}</text>
										<view class="btn">
											马上兑
										</view>
									</view>
								</view>
							</view> 
							<noMore v-if="!goodsList.length"></noMore>
						</view>
						
					</scroll-view>
				
		</view>
	</view>
	
</template>

<script>
	import noMore from '@/components/noMore/noMore.vue'
	export default {
		data() {
			return {
				activeTypeId: 0,
				params:{
					page: 1,
				},
				typeArr:[
					{name:'全部',id: '0',}
				],
				goodsList:[],
				textVal:'',
				nextPage : true,
				swiperArr:[],
			};
		},
		components:{
			noMore
		},
		methods:{
			getSwiper(){
				this.myHttp({
					url:'/addons/yun_shop/api.php',
					data:{
						route : 'home-page.sliads',
						is_lb : 1, //兑换商城
					}
				}).then((res)=>{
					if(res.result== '1'){
						this.swiperArr = res.data
					}
				})
			},
			changeType(_id){
				if(_id == this.activeTypeId){
					return
				}
				this.params.page = 1
				this.activeTypeId = _id
				this.getGoodArr()
			},
			getShopType(){
				this.myHttp({
					url:'/addons/yun_shop/api.php',
					data:{
						route : 'home-page.love-cate',
						type : 2,
					}
				}).then((res)=>{
					if(res.result== '1'){
						this.typeArr = this.typeArr.concat(res.data.data)
					}
				})
			},
			getGoodArr(){
				let cate_id = this.activeTypeId != 0 ? this.activeTypeId : ''
				this.myHttp({
					url:'/addons/yun_shop/api.php',
					data:{
						route : 'home-page.goodsLove',
						page : this.params.page,
						ingress : '',
						cate_id ,
					}
				}).then((res)=>{
					if(res.result== '1'){
						if(this.params.page == 1){
							this.goodsList = []
						}
						
						if(res.data.current_page ==res.data.last_page ){
							// 没有下一页
							this.nextPage = false
						}
						
						this.goodsList = this.goodsList.concat( res.data.data)
						
					}
				})
			},
			scrolltolower(){
				console.log('触底了');
				if(!this.nextPage){
					return
				}
				this.params.page++
				this.getGoodArr()
			},
			getMemberInfo(){
				this.$http.get('user.member_data').then(res => {
					this.textVal =  res.data.member.love_show.usable_data
				})
			},
		},
		filters:{
		},
		onLoad() {
			this.getShopType()
			this.getGoodArr()
			this.getMemberInfo()
			this.getSwiper()
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: #F8F8F8;
		display: flex;
		flex-direction: column;
		align-items: center;
		// position: relative;
		// width: 100vw;
		// height: 100vh;
		// overflow: hidden;
		.top{
			width: 750rpx;
			height: 430rpx;
			background: linear-gradient(98deg, #FF6000, #F22315);
			.title{
				margin-top: 10%;
				display: flex;
				justify-content: center;
				position: relative;
				color: #fff;
				.icon{
					position: absolute;
					left: 5%;
					top: 50%;
					transform: translateY(-50%);
				}
			}
			.info{
				margin-top: 35rpx;
				padding: 0 26rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #fff;
				.left{
					text{
						font-size: 24rpx;
					}
					.val{
						margin-top: 10rpx;
						font-weight: 600;
						font-size: 56rpx;
					}
				}
				.right{
					
				}
			}
			
			
		}
		
		
		.swiper{
			margin-top: -140rpx;
			width: 700rpx;
			height: 235rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
		}
		.typeArr{
			background-color: #fff;
			display: flex;
			width: 100%;
			height: 80rpx;
			padding: 20rpx;
			align-items: center;
			.typeArrItem{
				font-size: 28rpx;
				padding: 24rpx 30rpx;
				font-family: PingFang SC;
				color: #000000;
				display: flex;
				justify-content: center;
				background-color: #fff;
				white-space: nowrap;
				// margin-right: 80rpx;
				position: relative;
				.activeText{
					color: #FF5113;
					&:after{
						content: '';
						position: absolute;
						bottom: 10%;
						left: 50%;
						transform: translateX(-50%);
						width: 90%;
						height: 8rpx;
						background: #FF5113;
						border-radius: 4rpx;
					}
				}
			}
			
		}
	
		.goodsArr{
				display: flex;
				flex-direction: column;
				background-color: #fff;
				padding: 20rpx 25rpx 50rpx;
				margin-bottom: 100rpx;
				.goodsArrItem{
					width: 100%;
					height: 182rpx;
					border-radius: 10rpx;
					margin-top: 40rpx;
					display: flex;
					.cover{
						width: 182rpx;
						height: 182rpx;
						border-radius: 10rpx;
						image{
							width: 182rpx;
							height: 182rpx;
							border-radius: 10rpx;
						}
					}
					
					.info{
						color: #000;
						padding: 0 20rpx;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						flex: 1;
						.name{
							overflow: hidden;
							display: -webkit-box;
							-webkit-box-orient: vertical;    
							-webkit-line-clamp: 2;
							font-weight: 600;
							font-size: 28rpx;
						}
						.desc{
							flex: 1;
							margin-top: 10rpx;
							font-size: 24rpx;
							color: #C5C5C5;
						}
						.bottomBox{
							display: flex;
							justify-content: space-between;
							align-items: center;
							width: 100%;
							text{
								font-size: 26rpx;
								color: #E9622B;
							}
							.btn{
								width: 146rpx;
								height: 50rpx;
								background: linear-gradient(98deg, #E95E2A, #F0953E);
								border-radius: 25rpx;
								display: grid;
								place-items:center;
								color: #fff;
							}
						}
					}
					text{
						color: #E9612B;
					}
				}
		}
	}

</style>
